<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--  -->

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>我的收货地址</title>
<link rel="stylesheet" href="__PUBLIC__/adress/base.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/adress/main.min.css">
<!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/bootstrap/css/bootstrap.min.css" media="screen"> -->
<script type="text/javascript" src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/MyComponent/js/proviceSel.js"></script>
<script type="text/javascript" src="__PUBLIC__/Compoent/tweenlite.js"></script>
<script type="text/javascript" src="__PUBLIC__/Compoent/tween.js"></script>

<!-- <script type="text/javascript" src="__PUBLIC__/Home/bootstrap/js/bootstrap.min.js"></script> -->
<style>
    
    #content{
        
        width: 400px;
        height: 400px;
        position:fixed;
        left: 240px;
        top: -3000px;
        border: 1px solid  #ff6700;
        opacity: 0;
        background-color: #ddd; 
        
        display:block;
        padding: 30px 20px 13px;
        background-color: #fff;
      /*transition: opacity 0.4s linear 0s;*/

    }

    table{
        position: absolute;
        /*background-color: yellow;*/
        width: 400px;

        margin: 0 auto;

        padding: 10px;


    }




    #sel{

        position: relative;
        /*background-color: red;*/
        width: 164px;
   



    }




    #content button{

        background-color: #ff6700;
        border: none;
        display: inline-block;
        padding: 10px 20px;
         color: white;

    }
    

    .b1{

        display: inline-block;

        background-color: #ff6700;

        margin-right: 10px;
        color: white;
        margin-top: 10px;
    }


    .b2{

        display: inline-block;

          background-color: #ff6700;

          margin-left: 10px;

          margin-top: 10px;
    }





    select{

          /*position: absolute;*/
          /*z-index: 9;*/
          width: 164px;
  
    }


    td input{

        border:1px solid #ccc;

        background-color: #fff;
        
        border-radius: 5%;

        width: 164px;

    }



    table{

         border-collapse:   separate;   border-spacing:   10px;
    }

    

    input:focus {
    transition: border  linear .2s, box-shadow linear .5s;
    -moz-transition: border linear .2s, -moz-box-shadow  linear .5s;
    -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
    outline: none;
    border-color: rgba(55,168,33,.75);
    box-shadow: 0 0 3px rgba(55,168,33,.5);
    -moz-box-shadow: 0 0 3px rgba(55,168,33,.5);
    -webkit-box-shadow: 0 0 3px rgba(55,168,33,3);
}




.address-item{

    /*float: left;*/
}


</style>

</head>

<include file='./MI/Home/View/Public/head.html' />
<body>
<div class="page-main user-main">
    <div class="container">
        <div class="row">
            <div class="span4">
                <div class="uc-box uc-sub-box">
                                        <div class="uc-nav-box">
                        <div class="box-hd">
                            <h3 class="title">订单中心</h3>
                        </div>
                        <div class="box-bd">
                            <ul class="uc-nav-list">
                                <li><a href="">我的订单</a></li>
                                <li><a href="">意外保</a></li>
                                <li><a href="">团购订单</a></li>
                                <li><a href="">评价晒单</a></li>
                                <li><a href="">话费充值订单</a></li>
                                <li><a href="">以旧换新订单</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="uc-nav-box">
                        <div class="box-hd">
                            <h3 class="title">个人中心</h3>
                        </div>
                        <div class="box-bd">
                            <ul class="uc-nav-list">
                                <li><a href="">我的个人中心</a></li>
                                <li><a href="">消息通知</a></li>
                                <li><a href="">现金账户</a></li>
                                <li><a href="">小米礼品卡</a></li>
                                <li><a href="">手机换新券</a></li>
                                <li><a href="">喜欢的商品</a></li>
                                <li><a href="">优惠券</a></li>
                                <li class="active"><a href="">收货地址</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="uc-nav-box">
                        <div class="box-hd">
                            <h3 class="title">售后服务</h3>
                        </div>
                        <div class="box-bd">
                            <ul class="uc-nav-list">
                                <li><a href="">服务记录</a></li>
                                <li><a href="">申请服务</a></li>
                                <li><a href="">领取快递报销</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="uc-nav-box">
                        <div class="box-hd">
                            <h3 class="title">账户管理</h3>
                        </div>
                        <div class="box-bd">
                            <ul class="uc-nav-list">
                                <li><a href="">个人信息</a></li>
                                <li><a href="">修改密码</a></li>
                                <li><a href="">社区VIP认证</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="span16">
    <div class="uc-box uc-main-box">
        <div class="uc-content-box">
            <div class="box-hd">
                <h1 class="title">收货地址</h1>
            </div>
            <div class="box-bd">
                
                <div class="user-address-list J_addressList clearfix">
                    <div class="address-item address-item-new"  id="J_newAddress">
                        <i class="iconfont" id='add'  ></i>
                        添加新地址
                    </div>


  <foreach name='data' item='val'>
  <div class="address-item J_addressItem" > 
   <dl> 
    <dt> 
     <em class="uname"><{$val.userName}></em> 
     <span class="tag"><{$val.area}></span>
    </dt> 
    <dd class="utel">
        <{$val.phone}>
    </dd> 
    <dd class="uaddress">
        <{$val.address}>
     <br/><{$val.detail}>
    </dd> 
   </dl> 
   <div class="actions"> 
    <!-- <a class="modify J_addressModify" data-id="<{$val.id}>">修改</a>  -->
    <a class="modify J_addressDel" data-id="<{$val.id}>" >删除</a> 
   </div> 
  </div>
</foreach>

                    
                </div>
            </div>

        </div>


     <div id="content">
    
        <center>
            <form action=""  enctype="multipart/form-data" method="post" name="fileinfo">
        <table>
            <tr>
                <td>姓名：</td><td><input type="text" name="userName"></td>
            </tr>
            <tr>
                <td>手机号：</td><td><input type="text" name="phone"></td>
            </tr>
            <tr style="height:200px;vertical-align: center;">
                <td>地址选择：</td><td><div id="sel" ></td>
            </tr>
            <tr>
            <td>详细地址：</td><td><input type="text" name="detail"></td>
            </tr>
            <tr>
            <td>地址标签：</td><td><input type="text" name="area"></td>
            </tr>
        
            <tr><td></td><td><div class="b1"><button  class = 'button' id="cancel">取消</button></div><div class="b2"><button  class = 'button' id="sub">提交</button></div></td></tr>
        </table>
        
    </form>
        </center>  
    

</div>


   

</div>


</body>
</html>



<!-- Small modal -->


<script>


// 


 function show(){

         var box = document.getElementById("content");

         var iWidth     = box.offsetHeight; //弹出窗口的宽度;
         var iHeight    = box.offsetWidth;//弹出窗口的高度;

         var iTop2 = (window.screen.availHeight - 20 - iHeight) / 2;
         var iLeft2 = (window.screen.availWidth - 10 - iWidth) / 2;
            var obj1 = 
            {
                top:iTop2,
                left:iLeft2,
                opacity:100,
                ease:Tween.Bounce.easeOut,
               
            };
            
            TweenLite(box, 3, obj1);
    }


    function hidden(){

          var box = document.getElementById("content");
            var obj2 = 
            {
                top:-2000,
                opacity:0,
                ease:Tween.Back.easeOut,
       
            };


             TweenLite(box, 3, obj2);

    }
function sendForm() {

  var oData = new FormData(document.forms.namedItem("fileinfo"));
 
  oData.append("CustomField", "This is some extra data");
 
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "<{:U('Home/Address/insert')}>", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
        
        if (oReq.responseText ==1) {
                hidden();
             alert('添加成功');
//刷新页面
             window.location.reload();

             



        }else if(oReq.responseText ==0){

             alert('添加失败，稍后再试');
        }else if(oReq.responseText ==2){
            alert('请完善您的信息');
        }
    } else {
        alert('网络错误，稍后再试');
    }
  };
 
  oReq.send(oData);
}


    $(function(){

        proviceSel('sel',"<{:U('Home/Address/provice')}>");
        
        $('#add').click(function(){

        // $("J_addressItem").slideDown("slow");
        show();




        var MyForm = $('#Myfrom')[0];

        var oMyForm = new FormData(MyForm);
        
        $('#sub').click(function(){


            sendForm();


        return false;
            })




        $('#cancel').click(function(){

            hidden();

        });



        return false;
  

        
    })


    $('.J_addressDel').click(function(){


        var id = $(this).data('id');

        var that = $(this);
        
            $.ajax({
               type: "POST",
               url: "<{:U('Home/Address/del')}>",
               data: {'id':id},
               success: function(msg){
                 if (msg) {
                    alert('删除成功');
                    that.parent().parent().remove();

                 }else{
                    alert('删除失败');
                    }
           }
        });

    })




   


})






    


    

</script>